<template>
    <div class="box">
        <mu-container>
            <div class="content">
                <div class="header-img"><img src="@/assets/logo.png" width="50%" alt=""></div>
                <mu-form :model="validateForm" ref="form" class="input-class">
                    <mu-form-item label="手机号" helpText="输入11位的手机号" :error-text="errphone" prop="userphone"
                                  :rules="userphoneRules">
                        <mu-text-field v-model="validateForm.userphone" prop="userphone"></mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="用户名" helpText="用户名长度大于2" :error-text="erruser" prop="username"
                                  :rules="usernameRules">
                        <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="密码" prop="password" :error-text="errpassword" :rules="passwordRules">
                        <mu-text-field type="password"
                                       v-model="validateForm.password"
                                       prop="password"
                                       :action-icon="iconpassword ? 'visibility_off' : 'visibility'"
                                       :action-click="() => (iconpassword = !iconpassword)"
                                       :type="iconpassword ? 'text' : 'password'">
                        </mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="再次输入密码" prop="repassword" :error-text="errpassword" :rules="passwordRules">
                        <mu-text-field v-model="validateForm.repassword"
                                       prop="repassword"
                                       :action-icon="iconrepassword ? 'visibility_off' : 'visibility'"
                                       :action-click="() => (iconrepassword = !iconrepassword)"
                                       :type="iconrepassword ? 'text' : 'password'">
                        </mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="验证码" helpText="输入6位的验证码" prop="code" :rules="codeRules">
                        <mu-text-field v-model="validateForm.code" type="number" prop="code">
                            <mu-button
                                    small
                                    :disabled="validateForm.userphone === '' || codeTimer !== 0"
                                    v-loading="loadingCode"
                                    data-mu-loading-size="24"
                                    @click="getcode()">
                                <span v-if="!codeTimer">获取验证码</span>
                                <span v-else>{{codeTimer}}后重新获取</span>
                            </mu-button>
                        </mu-text-field>
                    </mu-form-item>
                </mu-form>
            </div>

            <div class="button-class">
                <mu-button color="#2196f3"
                           class="register"
                           v-loading="loadingRegister"
                           data-mu-loading-size="24"
                           @click="register()">
                    <span>注册</span>
                </mu-button>
                <br/>
                <mu-button color="#666" class="register" @click="backHistory()">
                    <span>返回</span>
                </mu-button>
            </div>
        </mu-container>
    </div>
</template>

<script>
export default {
    name: 'register',
    data(){
        return {
            validateForm: {
                username: '',
                password: '',
                repassword: '',
                userphone: '',
                code: ''
            },
            erruser:'',
            errphone: '',
            errpassword: '',
            loadingRegister: false,
            loadingCode: false,
            iconpassword: false,
            iconrepassword: false,
            codeTimer: 0,
            codeSetInter: null,
            usernameRules: [
                {validate: (val) => !!val, message: '必须填写用户名'},
                {validate: (val) => val.length >= 2, message: '用户名长度必须大于2'}
            ],
            userphoneRules: [
                {validate: (val) => !!val, message: '必须填写手机号'},
                {validate: (val) => val.length === 11, message: '请输入正确的手机号'}
            ],
            passwordRules: [
                {validate: (val) => !!val, message: '必须填写密码'},
                {validate: (val) => val.length >= 6, message: '密码长度必须大于6'}
            ],
            codeRules: [
                {validate: (val) => !!val, message: '必须填写验证码'},
                {validate: (val) => val.length === 6, message: '请输入6位的验证码'}
            ],
        }
    },
    mounted(){
    },
    methods: {
        backHistory(){
            this.$router.go(-1)
        },
        register(){
            this.$refs.form.validate().then(result => {
                if(result){
                    if (this.validateForm['password'] !== this.validateForm['repassword']) {
                        return this.errpassword = '两次密码不一样哦~'
                    }
                    this.loadingRegister = true;
                    this.$util.register(this.validateForm)
                        .then(() => {
                            this.$toast.info('注册成功，去登陆吧~');
                            setTimeout(() => {
                                this.$router.replace('/login')
                            },2000)
                        })
                        .catch(e => {
                            this.$toast.error(e.code + ' ' + e.msg);
                        })
                        .finally(() => {
                            this.loadingRegister = false;
                        })
                }
            });
        },
        getcode(){
            const userphone = this.validateForm.userphone;
            if (userphone.length !== 11) {
                return this.errphone = '输入正确的手机号可获取验证码'
            }
            this.loadingCode = true;
            this.$util.getVerificationCode({userphone})
                .then(res => {
                    if (res.codeTimer) {
                        this.codeTimer = res.codeTimer;
                        this.codeSetInter = setInterval(this.setIntervalCodeTimer, 1000);
                    }
                })
                .catch(e => {
                    this.$toast.error(e.code + ' ' + e.msg);
                })
                .finally(() => {
                    this.loadingCode = false;
                })
        },
        setIntervalCodeTimer(){
            if (this.codeTimer > 0) {
                return this.codeTimer--
            }
            if (this.codeSetInter) {
                clearInterval(this.codeSetInter);
                this.codeSetInter = null;
            }
        }
    },
    destroyed(){
        if (this.codeSetInter) {
            clearInterval(this.codeSetInter);
            this.codeSetInter = null;
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
    .box
        .content
            margin-top .4rem
            .input-class
                margin 0 auto
                margin-top .4rem
                width 70%
                text-align left
        .button-class
            margin-top .4rem
            .submit
            .register
                width 60%
                margin-bottom .1rem
</style>
